<script setup>
import Article from './article.vue';
const selectedKey = ref(null);
const nodes = [
  {
    key: '0',
    label: '一级菜单文案',
    data: 'Documents Folder',

    children: [
      {
        key: '0-0',
        label: '二级菜单',
        data: 'Work Folder'
      },
      {
        key: '0-1',
        label: '二级菜单',
        data: 'Home Folder'
      }
    ]
  },
  {
    key: '1',
    label: '一级菜单',
    data: 'Documents Folder',

    children: [
      {
        key: '1-0',
        label: '二级菜单',
        data: 'Work Folder'
      },
      {
        key: '1-1',
        label: '二级菜单',
        data: 'Home Folder'
      }
    ]
  },
  {
    key: '2',
    label: '一级菜单',
    data: 'Documents Folder',
    children: [
      {
        key: '2-0',
        label: '二级菜单',
        data: 'Work Folder'
      },
      {
        key: '2-1',
        label: '二级菜单',
        data: 'Home Folder'
      }
    ]
  }
];
</script>

<template>
  <!-- 头部导航 -->
  <div class="auto pc:max-w-[1200px] mobile:text-4xl mobile:px-10">
    <Nav />
  </div>
  <!-- 内容主体 -->
  <div class="main auto pc:max-w-[1200px] flex mobile:hidden">
    <!-- 侧栏 -->
    <div class="sidebar w-[260px] h-full border-l-[1px] border-r-[1px]">
      <Tree
        v-model:selectionKeys="selectedKey"
        :value="nodes"
        selectionMode="single"
        class="w-full h-full font-bold px-0"
      ></Tree>
    </div>
    <!-- 右侧内容 -->
    <div class="cont flex-1">
      <router-view></router-view>
    </div>
  </div>

  <div class="main pc:hidden px-10">
    <router-view></router-view>
  </div>

  <div class="banner mt-[60px]">
    <Banner title="您还需要帮忙吗？" button="联系支持" />
  </div>

  <!-- 底部栏 -->
  <div class="foot auto md:max-w-[1200px] mobile:px-10">
    <Foot />
  </div>
</template>

<style scoped lang="scss">
.main {
  margin-top: 60px;
}

:deep(.p-treenode .p-highlight) {
  background-color: #e5fcff !important;
  border: none;
  border-radius: 0px;
  outline: none;
  color: #00e1ff;
  position: relative;
  &::after {
    position: absolute;
    display: block;
    content: '';
    width: 5px;
    height: 100%;
    background-color: #00e1ff;
    top: 0;
    left: 0;
  }
}

:deep(.p-accordion-tab) {
  border-bottom: 1px solid #e5e7eb;
}
</style>
